<template>
    <div>
        <div class="container">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                   <i class="el-icon-s-platform"></i> 订单详情
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <hr>
            <table border  cellspacing="0" class="mt">
                <tr v-for="el in arr">
                    <td class="pd tc bg">{{el.user}}</td>
                    <td class="pd tc wd">{{el.name}}</td>
                    <td class="pd tc bg">{{el.license}}</td>
                    <td class="pd tc wd">{{el.num}}</td>
                </tr>
            </table>
            <table border class="mb" cellspacing="0">
                <tr v-for="el in arr1">
                    <td class="pd tc bg">{{ el.list }}</td>
                    <td class="pd tc wd2">{{ el.cont }}</td>
                </tr>
            </table>
            <div>
                <el-button @click="backBtn">返回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchData } from '../../../api/index';
export default {
    name: 'basetable',
    data() {
        return {
            arr:[
                {user:'订单编号',name:'11',license:'服务编号',num:'1123456'},
                {user:'核销码',name:'11',license:'商家名称',num:'店小友'},
                {user:'买家',name:'张三',license:'订单状态',num:'待支付'},
                {user:'下单时间',name:'2022-10-10 11:09',license:'预约时间',num:''},
            ],
            arr1:[
                {list:'原价',cont:'32'},
                {list:'优惠',cont:'3'},
                {list:'实付金额',cont:'25'},
                {list:'服务介绍',cont:'车辆镀膜、车辆镀膜、车辆镀膜、车辆镀膜'}
            ],
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            fetchData(this.query).then(res => {
                console.log(res);
                this.tableData = res.list;
                this.pageTotal = res.pageTotal || 50;
            });
        },
        //返回按钮
        backBtn(){
            this.$router.back();
        }
    }
};
</script>

<style scoped>
h3{
    margin: 10px 0px;
}
table{
    width: 80%;
    border-color: rgb(251, 251, 251);
}
.mt{
    margin-top: 30px;
}
.mg{
    margin: 0 20px;
}
.mb{
    margin-bottom: 30px;
}
.wd{
    width: 300px;
}
.wd2{
    width: 796px;
}
.tc{
    text-align: center;
}
.pd{
    padding: 20px 30px;
    flex-grow: 1;
}
.bg{
    background-color: rgb(239,239,239);
}
</style>
